@highoutput/hds

HDS

We aim to build a library of custom ReactJS components that implements our unique UI design conventions (HDS). Our components will be based primarily on Chakra UI. React Storybook will be used for documentation and testing.

• Reusable block of components
• HDS integrated styling
• Easy to implement

Installation

npm i @highoutput/hds

In your main app file import theme provider and make it a parent of all components.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ThemeProvider } from '@highoutput/hds';

const App = () => {
  return (<ThemeProvider>{...components here}</ThemeProvider>);
};

ReactDOM.render(<App />, document.getElementById('root'));

After that you can use all the components within hds core.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { InputField, Box } from '@highoutput/hds';

const Form = () => {
  return (
    <Box>
      <InputField
        helperMsg="This is a hint text to help user"
        id="name"
        label="Name"
        onBlur={() => {}}
        onChange={() => {}}
        onPressEnter={() => {}}
        placeholder="Input your name"
      />
    </Box>
  );
};

export default Form;

Check out for more information

• Storybook Documentation and Preview
• Chakra Components

Other Packages

• @highoutput/hds-icons
• @highoutput/hds-auth
• @highoutput/hds-spinner
• @highoutput/hds-pagination
• @highoutput/hds-array-field
• @highoutput/hds-auto-form
• @highoutput/hds-contact-us
• @highoutput/hds-utilities
• @highoutput/hds-forms
• @highoutput/hds-autocomplete-input